<template>
    <!-- 卦名练习 -->
    <div class="gua-name-test-container">
        <div class="zhuang-gua">
            <div id="gua" @click="inputVal = guaNameList[guaIndex]">
                <div v-for="index of 6" :key="index" class="yao"
                    :class="guaList[guaIndex].charAt(index - 1) === '0' ? 'yin' : 'yang'">
                </div>
            </div>
            <div id="shiying-list" class="cell-list">
                <div :style="{ 'visibility': shiyingShow(index - 1) ? 'visible' : 'hidden' }" v-for="index of 6"
                    :key="index" @click="selectShiYing(index - 1)"
                    :class="shiyingStatusList[index - 1] === -1 ? 'cell-normal' : shiyingStatusList[index - 1] === 0 ? 'cell-error' : 'cell-right'">
                    {{ shiyingStatusList[index - 1] === 2 ? '应' : '世' }}</div>
            </div>
        </div>
        <input id="input" placeholder="请输入卦名" v-model="inputVal"
            :style="{ 'color': inputVal === guaNameList[guaIndex] ? 'green' : '#000' }" />
        <div id="gong-list" class="cell-list">
            <div v-for="(item, index) in gongDataList" :key="index" @click="selectGong(index)"
                :class="gongStatusList[index] === -1 ? 'cell-normal' : gongStatusList[index] === 0 ? 'cell-error' : 'cell-right'">
                {{ item }}</div>
        </div>
        <div id="bian-list" class="cell-list">
            <div v-for="(item, index) in bianDataList" :key="index" @click="selectBian(index)"
                :class="bianStatusList[index] === -1 ? 'cell-normal' : bianStatusList[index] === 0 ? 'cell-error' : 'cell-right'">
                {{ item }}</div>
        </div>
        <div id="button-next" class="button" @click="initGua">刷新</div>
        <div
            @click="showImage(['https://mp-aac0e8f6-ad5a-4992-aecf-d590a570f6a9.cdn.bspapp.com/cloudstorage/e2df4f65-6236-4512-9309-79cd5e6aec67.jpeg']);">
            资料</div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getRandomStr,showImage } from '@utils';

const gongDataList = ['乾', '坎', '艮', '震', '巽', '离', '坤', '兑'];
const bianDataList = ['纯', '初', '二', '三', '四', '五', '游', '归'];
const guaList = [
    //八纯卦    初爻变     二爻变     三爻变     四爻变     五爻变     游魂卦     归魂卦
    '111111', '111110', '111100', '111000', '110000', '100000', '101000', '101111',
    '010010', '010011', '010001', '010101', '011101', '001101', '000101', '000010',
    '100100', '100101', '100111', '100011', '101011', '111011', '110011', '110100',
    '001001', '001000', '001010', '001110', '000110', '010110', '011110', '011001',
    '110110', '110111', '110101', '110001', '111001', '101001', '100001', '100110',
    '101101', '101100', '101110', '101010', '100010', '110010', '111010', '111101',
    '000000', '000001', '000011', '000111', '001111', '011111', '010111', '010000',
    '011011', '011010', '011000', '011100', '010100', '000100', '001100', '001011',
];
const guaNameList = [
    '乾为天', '天风姤', '天山遁', '天地否', '风地观', '山地剥', '火地晋', '火天大有',
    '坎为水', '水泽节', '水雷屯', '水火既济', '泽火革', '雷火丰', '地火明夷', '地水师',
    '艮为山', '山火贲', '山天大蓄', '山泽损', '火泽睽', '天泽履', '风泽中孚', '风山渐',
    '震为雷', '雷地豫', '雷水解', '雷风恒', '地风升', '水风井', '泽风大过', '泽雷随',
    '巽为风', '风天小蓄', '风火家人', '风雷益', '天雷无妄', '火雷筮盍', '山雷颐', '山风蛊',
    '离为火', '火山旅', '火风鼎', '火水未济', '山水蒙', '风水涣', '天水讼', '天火同人',
    '坤为地', '地雷复', '地泽临', '地天泰', '雷天大壮', '泽天夬', '水天需', '水地比',
    '兑为泽', '泽水困', '泽地萃', '泽山咸', '水山蹇', '地山谦', '雷山小过', '雷泽归妹',
];
const guaIndex = ref(0); // 当前卦索引位置
const gongStatusList = ref([-1, -1, -1, -1, -1, -1, -1, -1]);
const bianStatusList = ref([-1, -1, -1, -1, -1, -1, -1, -1]);
const shiyingStatusList = ref([-1, -1, -1, -1, -1, -1]);
const inputVal = ref('');

onMounted(() => {
    initGua();
});

function initGua() {
    guaIndex.value = 0;
    inputVal.value = '';
    clearGong();
    clearBian();
    clearShiYing();
    let guaNumber = '';
    for (var i = 0; i < 6; i++) {
        var random = getRandomStr();
        guaNumber += random;
    }
    guaIndex.value = guaList.indexOf(guaNumber)
}

function selectGong(gongIndex) { // 选择属于哪个宫
    clearGong();
    var rightGongIndex = parseInt(guaIndex.value / 8);
    if (gongIndex === rightGongIndex) {
        gongStatusList.value[gongIndex] = 1;
    } else {
        gongStatusList.value[gongIndex] = 0;
    }
}

function clearGong() {
    for (var i = 0; i < 8; i++) {
        gongStatusList.value[i] = -1;
    }
}

function selectBian(bianIndex) { // 选择几爻变
    clearBian();
    var rightBianIndex = parseInt(guaIndex.value % 8);
    if (bianIndex === rightBianIndex) {
        bianStatusList.value[bianIndex] = 1;
    } else {
        bianStatusList.value[bianIndex] = 0;
    }
}

function clearBian() {
    for (var i = 0; i < 8; i++) {
        bianStatusList.value[i] = -1;
    }
}

function selectShiYing(shiYingIndex) { // 选择哪个为世应
    clearShiYing();
    var rightBianIndex = parseInt(guaIndex.value % 8);
    var rightShiIndex = 0;
    switch (rightBianIndex) {
        case 0: // 八纯卦
            rightShiIndex = 0;
            break;
        case 1: // 初爻变
            rightShiIndex = 5;
            break;
        case 2: // 二爻变
            rightShiIndex = 4;
            break;
        case 3: // 三爻变
            rightShiIndex = 3;
            break;
        case 4: // 四爻变
            rightShiIndex = 2;
            break;
        case 5: // 五爻变
            rightShiIndex = 1;
            break;
        case 6: // 游魂卦
            rightShiIndex = 2;
            break;
        case 7: // 归魂卦
            rightShiIndex = 3;
            break;
    }
    if (shiYingIndex === rightShiIndex) {
        shiyingStatusList.value[shiYingIndex] = 1;
        var yingIndex = shiYingIndex >= 3 ? shiYingIndex - 3 : shiYingIndex + 3;
        shiyingStatusList.value[yingIndex] = 2;
    } else {
        shiyingStatusList.value[shiYingIndex] = 0;
    }
}

function shiyingShow(index) {
    if (shiyingStatusList.value.indexOf(2) === -1) {
        return true;
    } else if (shiyingStatusList.value[index] === 1 || shiyingStatusList.value[index] === 2) {
        return true;
    } else {
        return false;
    }
}

function clearShiYing() {
    for (var i = 0; i < 6; i++) {
        shiyingStatusList.value[i] = -1;
    }
}

</script>

<style lang="scss" scoped>
.gua-name-test-container {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .75rem;
}

.button {
    width: 100%;
    height: 2.5rem;
    margin: .75rem;
    background-color: #f2f2f2;
    border-radius: .2rem;
    color: #666;
    text-align: center;
    line-height: 2.5rem;
}

#gua {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.yao {
    width: 10rem;
    height: 1.25rem;
    margin-top: .75rem;
}

.yang {
    background-color: #000;
}

.yin {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yin::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1.25rem;
    background-color: #fff;
}

#input {
    height: 2.5rem;
    font-size: .9rem;
    margin-top: 1rem;
}

#gong-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 .75rem;
    margin-top: .75rem;
}

#bian-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 .75rem;
    margin-top: .75rem;
}

.cell-list>div {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .2rem;
    border: #000 solid .025rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-normal {
    background-color: unset;
}

.cell-error {
    background-color: red;
}

.cell-right {
    background-color: green;
}

.zhuang-gua {
    position: relative;
}

#shiying-list {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
}
</style>